<template>
	<div  class="box">
		<p class="preview-text">精品栏目</p>
		<ul class="list-ul">
			<li v-for="v in listArray" :key='v.id' @click="clickIconLink(v.id,v.name)">
				<img :src="v.iconUrl+'?x-oss-process=image/resize,m_fixed,h_248,w_190'" />
				<div class="middle-text-box">
					<p class="p-top">{{v.name}}</p>
					<!-- <p class="p-bottom">{{v.shortIntro}}</p> -->
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
	export default {
        props: {
			middleIconArray: Object,
		},
		data() {
			return {
				listArray:[],
			}
		},
		computed: {},
		created() {
			this.listArray = this.middleIconArray;
		},
		watch:{
		},
		mounted() {
		},
		methods:{
			clickIconLink(id,name){
				this.$router.push({
					path: `/${this.$channel}/telMore`,
					query: {
						id: id,
						title:name
					}
				})
			},
		}
	}
</script>

<style scoped="scoped">
	.box {
		width: 100vw;
	}
	.preview-text{
		display: flex;
        align-items: center;
		height: 36px;
		margin: 27px 0 24px  32px;
		font-size: 35px;
		line-height: 36px;
		font-weight: 800;
		color: #34323F;
	}
	 .preview-text::before{
		content: " ";
		height: 44px;
		width: 44px;
		margin-right: 16px;
		background: url('../../assets/images/zxyh/hot.png') no-repeat;
		background-size: 100% 100% ;
    }
	
	.list-ul {
		width: calc(100% - 32px);
		margin-left: 32px;
		display: flex;
		flex-direction: row;
		overflow-y: auto;
	}
	
	.list-ul li {
		width: 190px;
        height: auto; 
		display: flex;
		flex-direction: column;
		margin-right: 8px;
	}
	.list-ul li:nth-last-child(1){
		margin-right: 30px;

	}
	.list-ul li img {
		width: 190px;
		height: 248px;
		margin-bottom: 19px;
		border-radius: 24px;
	}
	
	.middle-text-box {
		width: 100%;
		padding-bottom: 10px;
	}
	
	.p-top {
		width: 100%;
		font-size: 28px;
		font-weight: normal;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.p-bottom {
		/*background: saddlebrown;*/
		font-size: 21px;
		font-weight: 500;
		color: #929292;
		margin-top: 9px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>